<template>
    <div>
        <Col span="24" style="text-align:center">
        <h1>预约管理</h1>
        </Col>
        <Col span="24">
        <Button type="primary" style="margin-bottom: 5px" @click="add()">添加预约时段</Button>
        </Col>
        <Table border :columns="columns" :data="data">
        <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">修改</Button>
            <Button type="error" size="small" @click="del(row)">删除</Button>
        </template>
        </Table>
        <Modal
          v-model="info.isshow"
          title="设置预约时段"
          @on-ok="saveok">
        <Form :model="forminfo" label-position="left" :label-width="100" style="margin-left:100px">
            <FormItem label="开始时间">
                <TimePicker type="time" v-model="forminfo.start_time" placeholder="选择时间" style="width: 168px"></TimePicker>
            </FormItem>
            <FormItem label="结束时间">
                <TimePicker type="time" v-model="forminfo.end_time" placeholder="选择时间" style="width: 168px"></TimePicker>
            </FormItem>
            <FormItem label="数量">
                <Input v-model="forminfo.num" style="width: 168px"></Input>
            </FormItem>
        </Form>
      </Modal>
    </div>
</template>

<script>
import { createLinenum, findLinenumList, updateLinenum, deleteLinenum } from '@/api/eventlist'
export default {
  name: 'index',
  data () {
    return {
      tabIndex: 'zx',
      columns: [
        {
          title: '开始时间',
          key: 'start_time'
        },
        {
          title: '结束时间',
          key: 'end_time'
        },
        {
          title: '预约数量',
          key: 'num'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      data: [],
      info: {
        isshow: false
      },
      forminfo: {}
    }
  },
  methods: {
    init () {
      console.log('====')
      findLinenumList().then(res => {
        if (res.data.errcode === 0) {
          console.log(res.data)
          this.data = res.data.data
        } else {
          this.$Notice.error({ title: res.data.errmsg })
        }
      })
    },
    add () {
      this.info.isshow = true
      this.info.isedit = false
    },
    edit (row) {
      this.forminfo = row
      this.info.isshow = true
      this.info.isedit = true
    },
    del (row) {
      deleteLinenum(row).then(res => {
        console.log(res.data)
        if (res.data.errcode === 0) {
          this.init()
          this.$Notice.success({ title: '成功' })
        } else {
          this.$Notice.error({ title: res.data.errmsg })
        }
      })
    },
    saveok () {
      console.log(this.forminfo, 'aaaa')
      let url = ''
      if (this.info.isedit) {
        url = updateLinenum
      } else {
        url = createLinenum
      }
      let params = this.forminfo
      url(params).then(res => {
        console.log(res.data)
        if (res.data.errcode === 0) {
          this.init()
          this.forminfo = {}
          this.$Notice.success({ title: '成功' })
        } else {
          this.$Notice.error({ title: res.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

</style>
